<template>
  <div style="overflow-x:hidden">
    <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
     <x-header title="隐患详情" :left-options="{backText:'',preventGoBack:'true'}"
                @on-click-back="toDangerList()" >     
    </x-header>
    <div v-if="flag">
    <div>
      <div>
        <div class="button_div">
            <div class="button active" id="beforeRectify" @click="beforeRectify">整改前</div>
            <div class="button" id="afterRectify" @click="afterRectify" style="margin-left:3%">整改后</div>
        </div>
        <div>
          <swiper v-bind:list="imgList2"
            :show-desc-mask="false"
            :show-dots="true"
            dots-position="center"
            height="300px"
            v-show="!rectifyImgFlag"
            auto></swiper>
          <swiper v-bind:list="rectifyImgList2"
            :show-desc-mask="false"
            :show-dots="true"
            dots-position="center"
            height="300px"
            v-show="rectifyImgFlag"
            auto></swiper>
        </div>
      </div>
      <div class="danger_text">
        <div class="description">{{item.DESCRIPTION}}</div>
          <div class="state_time">
            <div style="background-color:#E9F7F2;color:#24B383" v-if="item.RECTIFYSTATE == '已整改'">{{item.RECTIFYSTATE}}</div>
            <div style="background-color:#FFF7E7;color:#FFAD14" v-else-if="item.RECTIFYSTATE == '未整改'">{{item.RECTIFYSTATE}}</div>
            <div style="background-color:#fcecec;color:#e64040" v-else>{{item.RECTIFYSTATE}}</div>
            <div class="datetime" v-text="time"></div>
          </div>
      </div>
    </div>
    <div class="sup"></div>
    <Group>
      <Cell title="整改单位" disable :value="detailList.CONSTRUCTIONUNIT">
        <img slot="icon" width="25" src="../../assets/img/rectifyUnit.png" class="icon"/>
      </Cell>
      <Cell title="整改负责人" disable :value="detailList.AUDITUSERFULLNAME2">
        <img slot="icon" width="25" src="../../assets/img/rectifyPerson.png" class="icon"/>
      </Cell>
    </Group>
    <div class="sup"></div>
    <div>
      <div style="display:flex;padding:15px">
        <img src="../../assets/img/deal_progress.png" width="25"/>
        <div style="margin-left:2%;">处理过程</div>
      </div>
      <div v-for="(item,index) in flowList" :key="index" class="flowlist_div">
        <img src="../../assets/img/flowlist_icon.png" class="flowlist_icon" v-if="item.commandMessage !='流程开始' && item.commandMessage !='流程结束'"/>
        <div class="flowlist_div_son" v-if="item.commandMessage !='流程开始' && item.commandMessage !='流程结束'">
          <div class="dutyPerson">{{item.assignessName }}</div>
          <div class="commandMes">{{item.name}}</div>
          <div class="commandMes">{{item.commandMessage}}</div>
          <div class="createTime">{{item.createTime}}</div>
        </div>
      </div>
           <div v-for="(item,index) in flowListIng" :key="index" class="flowlist_div">
            <img src="../../assets/img/flowlist_icon_todo.png" class="flowlist_icon"/>
            <div class="flowlist_div_son">
              <div class="dutyPerson">{{item.assignessName}}</div>
              <div class="commandMes">{{item.name}}</div>
              <div class="waitToDo">待办</div>
              <div class="createTime">{{item.createTime}}</div>
            </div>
           </div>
    </div>
    </div>
    <div v-if="flag1">
    <div>
      <div>
        <div class="button_div">
            <div class="button active" id="beforeRectify" @click="beforeRectify">整改前</div>
            <div class="button" id="afterRectify" @click="afterRectify" style="margin-left:3%">整改后</div>
        </div>
        <div>
          <swiper v-bind:list="imgList2"
            :show-desc-mask="false"
            :show-dots="true"
            dots-position="center"
            height="300px"
            v-show="!rectifyImgFlag"
            auto></swiper>
          <swiper v-bind:list="rectifyImgList2"
            :show-desc-mask="false"
            :show-dots="true"
            dots-position="center"
            height="300px"
            v-show="rectifyImgFlag"
            auto></swiper>
        </div>
      </div>
      <div class="danger_text">
        <div class="description">{{item.DESCRIPTION}}</div>
          <div class="state_time">
            <div style="background-color:#FFF7E7;color:#FFAD14">未整改</div>
            <div class="datetime" v-text="time"></div>
          </div>
      </div>
    </div>
    <div class="sup"></div>
    <Group>
      <Cell title="检查项" disable :value="item.CHECKITEMS">
        <img slot="icon" width="25" src="../../assets/img/rectifyUnit.png" class="icon"/>
      </Cell>
      <Cell title="检查人" disable :value="item.INPUTERFULLNAME">
        <img slot="icon" width="25" src="../../assets/img/rectifyPerson.png" class="icon"/>
      </Cell>
    </Group>
    <div class="sup"></div>
    <div>
      <div style="display:flex;padding:15px">
        <img src="../../assets/img/deal_progress.png" width="25"/>
        <div style="margin-left:2%;">处理过程</div>
      </div>
      <div class="flowlist_div">
        <img src="../../assets/img/flowlist_icon.png" class="flowlist_icon"/>
        <div class="flowlist_div_son">
          未发起整改通知单
        </div>
      </div>
    </div>
    </div>
    </v-touch>
  </div>
</template>

<script>
import {Group,Cell} from 'vux'
import { XButton } from 'vux'
import $ from 'jquery'
export default {
    name:"dangerDetail",
    components:{
      Group,
      Cell,
      XButton
    },
    deactivated () { //清除keep-alive的缓存
      this.$destroy(true)
    },
    data(){
      return {
        item : "",
        isPrjManag:"",
        projectId:"",
        detailList:[],
        guid:"",
        flowList:[],
        flowListIng:[],
        imgList:[],
        imgList2:[],
        rectifyImgList:[],
        rectifyImgList2:[],
        rectifyImgFlag:false,
        flag:false,//未拉取和未整改的flag
        flag1:false,//未拉取和未整改的flag
        time:"",
      }
    },
    mounted(){
      this.isPrjManag = this.$route.params.isPrjManag;//传值回给dangerList
      this.projectId = this.$route.params.projectId;//传值回给dangerList
      this.item = this.$route.params.item;
      this.getDetailInfo();
      this.getImgUrl();//获取整改图片(前)
    },
    methods:{
      onSwipeRight(){
        this.$router.push({
          path:'/dangerList',
          name:'dangerList',
          params : {
            isPrjManag : this.isPrjManag,
            projectId : this.projectId
          }
        })
      },
      toDangerList(){
        console.log("isPrjManag",this.isPrjManag)
        console.log("projectId",this.projectId)
        this.$router.push({
          path:'/dangerList',
          name:'dangerList',
          params : {
            isPrjManag : this.isPrjManag,
            projectId : this.projectId
          }
        })
      },
      getDetailInfo(){
        console.log(this.item)
        if(this.item.RECTIFYSTATE != undefined){
          this.flag = true
            this.$ajax({
            url : this.COMMON_URL,
            method : 'post',
            data : {
              _method:"HOME_FIX_PERMISSION_MENU.getRectifyDetailInfo",
              FKGUID:this.item.FKGUID
            },
            async : false
          }).then(res =>{
            console.log("info",res)
            this.detailList =  res.data.data[0]
            this.guid = this.detailList.GUID;
            this.getFlowInfo(this.guid);
          })
        }else{
          this.flag1 = true
        }
      },
      getFlowInfo(guid){
        //console.log("item",this.item);
        //console.log(guid);
         let vText = '{"_method":"flow.getInstIdByBizKey","_param":["' + guid + '"]}';
        this.$ajax({
          url : this.COMMON_URL,
          method : 'post',
          data : {
            FixJSON : vText,
          },
          async : false
        }).then(res =>{
          //console.log("res",res);
           var params = '{"_method":"flow.getTaskProcess","_param":["' + res.data.instId + '"]}';
          this.$ajax({
              method: 'post',
              url: this.COMMON_URL, //+ '?_objName=formflow&_viewId=tasklist',
              data: {
                FixJSON: params
              }
            }).then((res) => {
              //console.log("flowlist",res);
              this.flowList = res.data.taskListEnd;
              this.flowListIng = res.data.taskListIng;
            })
        })
        
      },
      getImgUrl(){
        //console.log("baseUrl",process.env.BASE_URL)
        var attachment = ""
        if(this.item.RECTIFYSTATE != undefined){
          attachment = this.item.IMAGE
          this.time = this.item.INPUTMONTH.substring(0,10)
        }else{
          attachment = this.item.ATTACHMENTS
          this.time = this.item.INPUTDATE.substring(0,10)
        }
        this.$ajax({
          url : this.COMMON_URL,
          method : 'post',
          data : {
            _method : "FIX_ACC_FILE_INFO.getFileWebPath",
            fieldToken : attachment
          },
          async : false,
        }).then(res=>{
          console.log("imgB",res);
          this.imgList.splice(0);
          this.imgList2.splice(0);
          for(var i= 0;i < res.data.data.length;i++){
            var imgUrlStr = res.data.data[i].FileUrl;
            if(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/") != 1){
		    	  	imgUrlStr = process.env.BASE_URL + '/qhszpm/' + imgUrlStr.substring(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/"));
            }
            console.log("imgUrl",imgUrlStr);
            var obj = {
              url : 'javascript:',
              img : imgUrlStr
            }
            this.imgList.push(obj);
          }
          this.imgList2 = this.imgList;//绑定swiper（一次性绑定）否则会出现swiper不能轮播的问题
          console.log("imglist",this.imgList)
          console.log("imglist2",this.imgList2)
        })
      },
      beforeRectify(){
        $('#beforeRectify').addClass('active');
        $('#afterRectify').removeClass('active');
        this.getImgUrl();
        this.rectifyImgFlag = false;
      },
       afterRectify(){
        $('#beforeRectify').removeClass('active');
        $('#afterRectify').addClass('active');
        this.getRectifyImgUrl();
        this.rectifyImgFlag = true;
      },
      getRectifyImgUrl(){
        var attachment = ""
        if(this.item.RECTIFYSTATE != undefined){
          attachment = this.item.RECTIFYIMAGE
        }
        this.rectifyImgList.splice(0); 
        this.rectifyImgList2.splice(0);
        this.$ajax({
          url : this.COMMON_URL,
          method : 'post',
          data : {
            _method : "FIX_ACC_FILE_INFO.getFileWebPath",
            fieldToken : attachment
          },
          async : false,
        }).then(res=>{
     
          for(var i= 0;i < res.data.data.length;i++){
            var imgUrlStr = res.data.data[i].FileUrl;
            if(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/") != 1){
		    	  	imgUrlStr = process.env.BASE_URL + '/qhszpm/' + imgUrlStr.substring(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/"));
            }
            var obj = {
              url : 'javascript:',
              img : imgUrlStr
            }
            this.rectifyImgList.push(obj);
          }
          this.rectifyImgList2 = this.rectifyImgList;
        })
      }

    }
}
</script>

<style scoped>
.button{
  background-color:#FFFFFF;
  color:#B3B5BA;
  text-align: center;
  width: 70px;
}
.active{
  background-color:#262A34;
  color:#FFFFFF;
}
.button_div{
  display:flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 999;
  left: 30%;
  top: 60px;
}
.sup{
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #F5F5F5;
}
.flowlist_div{
  display:flex;
  margin-bottom: 10px;
}
.flowlist_icon{
  width:30px;
  height:30px;
  padding:10px;
}
.createTime{
  padding: 0 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:20px;
}
.commandMes{
  padding: 10px 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:20px;
}
.dutyPerson{
  padding: 10px 10px 5px 10px;
  font-size:16px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(25,25,25,1);
  line-height:24px;
}
.flowlist_div_son{
  background-color: #F9F9F9;
  width: 80%;
  height: 100px;
}
.icon{
  margin-right: 10px;
}
/* .vux-header /deep/ .vux-header-title {
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #262A34;
  font-family:PingFangSC-Semibold;
} */
.danger_text{
    width:100%;
    padding: 10px 10px;
}
.state_time{
    display:flex;
    margin-top:5%;
}
.description{
    color:#333333;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    line-height:24px;
}
.datetime{
    font-size:13px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:#999999;
    line-height:20px;
    margin-left:auto;
    margin-right: 5%;
}
</style>
